<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1867026_k3dw7zsg797.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 4000px;
        }

        .t1 {
            width: 100%;
            background-color: yellowgreen;
            height: 70px;
        }

        .t2 {
            height: 70px;
            width: 100%;
            background-color: wheat;
        }

        .t3 {
            height: 70px;
            width: 1000px;
            margin: 0 auto;
            background-color: blanchedalmond;
        }

        h1 {
            float: left;
            margin-left: 50px;
            font-size: 30px;
            font-weight: normal;
            line-height: 70px;
        }

        .box {
            margin-left: 350px;
            padding-top: 28px;
        }

        .t3 input {
            height: 22px;
            float: left;
            border: 0;
        }

        .t3 button {
            float: left;
            border: 0;
            width: 50px;
            height: 22px;
        }

        .t3 a {
            display: block;
            width: 50px;
            height: 22px;
        }

        .t3 span {
            font-size: 20px;
            display: inline-block;
            line-height: 20px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="t1"></div>
    <div class="t2"></div>
    <div class="t3" id="mm">
        <h1>我是淘宝</h1>
        <div class="box"> <input type="text"><button><a href="#"><span class="iconfont icon-sousuo"></span></a></button>
        </div>

    </div>




    <script>
        window.onload = () => {
            onscroll = function () {
                // console.log(scrollY)
                if (scrollY >= 180) {
                    let t3 = document.getElementsByClassName("t3");
                    t3[0].style.position = "fixed"
                    t3[0].style.left = "0"
                    t3[0].style.right = "0"
                    t3[0].style.margin = "0 auto"
                    t3[0].style.top = "0"
                    // mm.style.position = "fixed"
                    // console.log(t3)
                }
                if (scrollY < 200) {
                    let t3 = document.getElementsByClassName("t3");
                    t3[0].style.position = ""
                    t3[0].style.left = ""
                    t3[0].style.right = ""
                    t3[0].style.margin = "0 auto"
                    t3[0].style.top = ""
                }
            }
        }
    </script>
</body>

</html>